<template>
	<!-- 降水 -->
	<view>
		<view class="item_detail_box box_shadow" :style="!isUp ? hide : show" v-show="!showPopup">
			<pull-up :isUp.sync="isUp"></pull-up>
			<!-- <view style="display: flex; justify-content: space-between;">
				<div @click="showArea = true" class="areaDiv">{{value}}</div>
			</view>
			<u-select v-model="showArea" :list="area" @confirm="confirm"></u-select> -->
			<ul class="numBox">
				<li>
					<image src="../image/icon_rain.png" mode=""></image>最大降雨量：{{totalAlert}} mm
				</li>
				<li>
					<image src="../../../assets/images/home/icon_address.png" mode=""></image>站点：{{totalGuarantee}}
				</li>
			</ul>
			<scroll-view class="content" :scroll-y="isUp" :scroll-top="scrollTop" @scroll='handleScroll'>
				<u-table v-if="isUp" align="left">
					<u-tr>
						<u-th>站点名称</u-th>
						<u-th>1小时(mm)</u-th>
						<u-th>24h(mm)</u-th>
					</u-tr>
					<u-tr v-for="item in tableList" @click.native="handleClick(item.properties)">
						<u-td>{{item.properties.name}}</u-td>
						<u-td>{{item.properties.hourVal}}</u-td>
						<u-td>{{item.properties.dayVal}}</u-td>
					</u-tr>
				</u-table>
			</scroll-view>
		</view>

		<u-popup class="popupBox" v-model="showPopup" mode="bottom" length="400rpx" :mask="false"
			:mask-close-able="false" :closeable="true">
			<view class="popupDetail">
				<h2>{{popupDetail.name}}</h2>
				<ul>
					<li>
						<label>实时:</label><span>{{popupDetail.hourVal}}(mm)</span>
					</li>
					<li>
						<label>24h:</label><span>{{popupDetail.dayVal}} (mm)</span>
					</li>
					<li>
						<label>采集时间:</label><span>{{popupDetail.alarmTime}}</span>
					</li>
				</ul>
				<a class="viewDetail" @click="goDetail">详情</a>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		Et
	} from "../../../assets/js/Oak.js";
	export default {
		data() {
			return {
				isUp: false, //默认收起状态
				show: "height: 800rpx;",
				hide: "height: 240rpx;",
				scrollTop: 0,
				showArea: false,
				value: '天府区', //下拉默认值
				area: [{
						value: '1',
						label: '天府区'
					},
					{
						value: '2',
						label: '天府区1'
					}
				],
				totalAlert: 2, //超警戒
				totalGuarantee: 4, //超保证
				tableList: [],
				showPopup: false,
				popupDetail: [],
				type: '',
				checked: {}
			}
		},

		mounted() {
			var vm = this;
			Et.Manager.register("pointChange", (data, type) => {
				console.log(data,type)
				vm.checked=data;
				this.type = type
				if (type == 'MONITOR_RAIN') {
					vm.popupDetail = data
				}
				setTimeout(function() {
					vm.showPopup = true
				}, 10)

			})
		},
		watch: {
			isUp(newVal) {
				if (!newVal) {
					this.scrollTop = Math.random();
				}
			},
			checked: function(newVal) {
				this.$emit("check", newVal, "rain");
			}
		},
		created() {
			this.Request()
		},
		methods: {
			dingwei(parms) {
				
				if (this.isUp) {
					this.$emit('listenToChildEvent', parms)
				}
			},
			goDetail() {
				uni.navigateTo({
					url: '/pages/monitor/monitorCurve?code=' + this.popupDetail.code + '&name=' + this.popupDetail
						.name + '&type=' + this.type
				});
			},
			handleScroll(e) {
				if (e.detail.scrollTop < -150) {
					this.isUp = false
				}
			},
			handleClick: function(item) {
				this.checked = item;
				Et.Manager.dispatch("pointChange", item, item.layerId)
			},
			confirm(e) {
				console.log(e);
				this.value = e[0].label
			},
			Request() {
				this.$api.reqApi.monitorRain().then(res => {
					res.features.forEach(ele => {
						ele.properties.layerId = res.layerId
					});
					this.tableList = res.features
					this.totalAlert = res.meta.statis.maxRain
					this.totalGuarantee = res.meta.statis.sName
					this.$emit('mapList', res);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		overflow: hidden;
		text-overflow: ellipsis; //超出部分以省略号显示 
		white-space: nowrap;
	}

	.box_shadow {
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
	}

	.numBox {
		li {
			display: flex;
			align-items: center;

			image {
				width: 28rpx;
				height: 28rpx;
				margin-right: 10rpx;
			}
		}
	}

	scroll-view {
		height: calc(100% - 160rpx);
	}
</style>
